html{
    box-sizing: border-box;
    scroll-behavior: smooth;
}

body{
    margin:0; /*this removes all visible margins from document*/
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.25em;
    background-color: #f8fbf6;
    overflow-y:scroll;
}

/*Section customization*/
    section, header{
        /*padding: 5%;*/
        margin: 1em;
    }

    section h2 {
        padding-top: 1em;
    }

/*header*/
header {
    /*margin: 2em;*/
    padding-top: 1.5em;
    text-align: left;
    align-items: left;
    overflow-wrap:anywhere;
}

/*Footer*/
    footer {
        /*background-color: #2C372E;*/
        align-items: center;
        padding-top: 1em;
    }
    footer img {
        justify-content: center;
    }

    footer p{
        color: black;
        text-align: center;
    }

    footer ul {
        display: flex;
        justify-content: center;
        gap:20px;
    }
    footer ul li.ResumeEmail {
        padding:20px 16px;
    }

    footer ul.SocialLinks {
        margin-top:20px;
        text-align: center;
    }

    footer a, footer ul p {
        color: #17663b;
        text-decoration: none;
    }

    footer a:hover, footer ul .prev:hover {
        text-decoration: underline;
    }


/*Navigation bar*/
    nav{
        overflow:hidden;
        background-color: #2C372E;
        top: 0;
        width: 100%;
        position: fixed;
        z-index: 100;
    }

    nav a{
        float: left;
        display: block;
        color: rgb(250,250,250);
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
    }

    nav a:hover{
        background-color: #17663b;
        color: white;
    }

/*Hiding Bullet Points*/
    ul.hideBulletPoints {
        list-style-type: none;
        margin: 0em;
        padding: 0;
        overflow: hidden;
    }

/*Links*/
    section a {
        color: #17663b;
        text-decoration: none;
        
    }

    section a:hover {
        text-decoration: underline;
    }
/*Section Bullet Points spacing*/
    section ul {
        display:block;
        overflow-wrap:anywhere;
    }
    section ul li {
        margin: 0.5em 0em 0em 1.5em;
    }


    

/*Iframe*/
    iframe {
        top:100%;
        justify-self: center;
        display: block;
        margin:1em 1.5em 1.5em 1.5em;
    }

/*Text and link colors*/
    h1,h2,h3,h4,h5,h6{
        color: #17663b;
        text-align: justify;
        text-justify: inter-word;
    }
    
    p{
        color: #0F2925;
        align-items:center;
        text-align: justify;
        text-justify:inter-word;
        text-wrap-mode: wrap;
    }
    /*Expander button*/
    
    button{
        overflow:hidden;
        background-color: #2C372E;
        color: white;
        text-align: justify;
        text-justify: inter-word;
    }
    
    button:hover{
        background-color: #17663b;
        color: white;
    }
    
    
    ul.hideBulletPoints ul.BulletPoints:not(ul.hideBulletPoints) li{
        text-align: justify;
        text-justify: inter-word;
        list-style-type: disc;
        color:#0F2925;
        
    }
    
    a.anchor {
        display: block;
        position: relative;
        top: -50px;
        visibility: hidden;
        
    }
    
    div.DataFlowDiagrams {
        display:none;
    }
    /*Page Sections Sidebar*/
    .NavigationLinks {
        
        margin-right: 2.25em;
        right: 0;
        top:10em;
        display:block;
        padding:1em;
        margin-top:auto;
        background-color: rgba(129, 139, 133, 0.201);
        position:fixed;
        border-radius:10%;
        outline:solid;
        outline-width:.1em;
        outline-color:#17663b;
        
    }
    
    .NavigationLinks h4 {
        display: block;
        padding:0;
        margin:0;
    }
    
    .NavigationLinks ul {
        display: block;
    }
    
    
    /*Media querys*/
    /* Extra small devices (phones, 600px and down) */
    @media only screen and (max-width: 600px) {
        .NavigationLinks {
            display: none;
        }
        
        nav ul a {
        font-size:.6em;
        padding: .8em .4em;
    }
    iframe {
        width:fit-content;
        height:fit-content;
    }
    
    section {
        padding-right:2em;
    }
 }

 /* Small devices (portrait tablets and large phones, 600px and up) */
 @media only screen and (min-width: 600px) {
    .NavigationLinks {
        display: none;
    }

    nav ul a {
        font-size:.75em;
        padding:.8em .4em;
    }
    iframe {
        width:fit-content;
        height:fit-content;
    }

    section {
        padding-right:2em;
    }
    
 }

 

 /* Medium devices (landscape tablets, 768px and up) */
 @media only screen and (min-width: 768px) {
    .NavigationLinks {
        display: none;
    }

    nav ul a {
        font-size:1em;
        padding:.8em .4em;
    }
    section {
        padding-right:2em;
    }
    iframe {
        width:560px;
        height:315px;
    }
 }

 @media only screen and (min-width: 930px) {
    .NavigationLinks {
        display: block;
    }

    nav ul a {
        font-size:1em;
        padding:.8em .5em;
    }

    section {
        padding-right: 17em;
    }

    h1,h2,h3,h4,h5 {
        padding-right: 2em;
    }

    iframe {
        width: 560px;
        height: 315px;
    }
 }
 
 /* Large devices (laptops/desktops, 992px and up) */
 @media only screen and (min-width: 992px) {
    .NavigationLinks {
        display: block;
    }

    section {
        padding-right: 17em;
    }

    iframe {
        width: 560px;
        height: 315px;
    }
    nav ul a {
        font-size:1.15em;
        padding:.8em 1.1em;
    }
 }
 
 /* Extra large devices (large laptops and desktops, 1200px and up) */
 @media only screen and (min-width: 1200px) {
    .NavigationLinks {
        display: block;
    }

    section {
        padding-right: 17em;
    }

    iframe {
        width: 560px;
        height: 315px;
    }

    nav ul a {
        font-size:1.25em;
        padding:.8em 1.1em;
    }
 }